<template>
  <div class="ctbsc-channel">
    <van-sticky >
      <NavBar pathName="channel" title="全部分类"></NavBar>
    </van-sticky>
    <template v-if="loading">
      <div class="channel-box" v-if="classifies.length>0">
        <div class="channel-item" v-for="(item,index) in classifies" :key="index">
          <van-cell-group  :border="false">
            <van-cell :to="'/list/'+item.id"   style="width: 100%;" >
              <template #title>
                <b class="b-title">{{item.name}}</b>
              </template>
              <template #extra>
            <span class="extra-icon">
              <van-icon name="arrow" />
            </span>
              </template>
            </van-cell>
            <div class="cell-son" v-if="item.children">
              <van-cell :title="subItem.name" :to="'/list/'+item.id+'/'+subItem.id"  is-link   v-for="(subItem,sid) in item.children" :key="sid"/>
            </div>
          </van-cell-group>

        </div>
      </div>
      <van-empty description="暂无数据" v-else/>
    </template>

    <van-loading color="#1AA97B" style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="!loading"/>

  </div>
</template>

<script>
  import NavBar from "@/components/NavBar.vue";
  export default {
    name: "channelView",
    components: {
      NavBar
    },
    data() {
      return {
        classifies:[],
        records:[],
        channelInfo:{},
        channelSonInfo:{},
        loading:false,
        id:null,
        sonId:null,
        params:{
          id:'',
          sonid:''
        },
        total:0,
        postParams:{
          classifyId:'',
          title:'',
        },
        pageParams:{
          page:1,
          pageSize:90
        }

      };
    },
    created() {
      this.$utils.setPageTitle("全部分类")
      this.$watch(
              () => this.$route.params,
              () => {
                this.params=this.$route.params

                if(this.params.id){
                  this.postParams.classifyId=this.params.id;
                }
                if(this.params.sonid){
                  this.postParams.classifyId=this.params.sonid;
                }
                this.getList()
              },
              // 组件创建完后获取数据，
              // 此时 data 已经被 observed 了
              { immediate: true }
      )


    },
    mounted:function(){
      this.$nextTick(()=>{
          window.scrollTo(0,0)
      });
    },
    methods:{

        getList(){
          this.$apis.homeData(this.postParams).then(res=>{
            this.loading=true;
            this.classifies=res.classifies;
            for(let i=0;i<res.classifies.length;i++){
              if(this.params.id==res.classifies[i].id){
                this.channelInfo=res.classifies[i];
                this.channelSonInfo={};
                this.$utils.setPageTitle(this.channelInfo.name)
                if(this.channelInfo['children']){
                  for(let j=0;j<this.channelInfo.children.length;j++){
                    if(this.params.sonid==this.channelInfo.children[j].id){
                        this.channelSonInfo=this.channelInfo.children[j];
                        this.$utils.setPageTitle(this.channelSonInfo.name)
                    }
                  }

                }
              }
            }

          })
        },

    }
  };
</script>
<style lang="less" scoped>

  .ctbsc-channel{
    padding:0px 0px 10px 0px;
    background: #f7f8fa;
    min-height: 100vh;
  }

  .channel-box{
    margin-top:10px;
    .channel-item{
      margin-bottom:10px;
    }
    .van-cell{
      align-items: center;
      .b-title{
        /*font-size:16px;*/

      }
      .extra-icon{
        margin-right:5px;
        font-size:16px;
        color:#969799;
      }
    }
    .cell-son{
      display: flex;
      padding:10px;
      justify-content: space-between;
      flex-wrap: wrap;
      .van-cell{
        margin-bottom:5px;
        padding:5px;
        width: 48%;font-size:12px;background: #f7f8fa;

      }
    }
  }

</style>
